<!--
 * @description 页面介绍
 * @author dumeng
 * @date 2022/6/1
 -->
<template>
  <div class="file-preview-page">
    <el-dialog
      v-el-drag-dialog
      custom-class="file-preview-dialog"
      title="预览"
      :visible.sync="dialogVisible"
      width="50%"
      append-to-body
      @close="handleClose"
    >
      <section class="content">
        <div v-if="type == 'video' || type == 'audio' " id="videoPreview" style="width: 100%;height: 100%;" />
        <div v-else-if="type === 'pdf'" class="pdf">
          <pdf v-for="item in numPages" :key="item" :src="filePath" :page="item" />
        </div>
        <template v-else-if="type === 'image'">
          <el-image
            :src="filePath"
            :preview-src-list="[filePath]"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" />
            </div>
          </el-image>
        </template>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
export default {
  name: 'Index',
  components: { pdf },
  directives: { elDragDialog },
  props: {
    type: {
      type: String,
      default: 'video'
    },
    filePath: {
      type: String,
      default: ''
    },
    fileName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: true,
      numPages: '',
      src: '',
      videoPlayer: null
    }
  },
  watch: {
  },
  mounted() {
    this.$nextTick(() => {
      if (this.type === 'video' || this.type === 'audio') {
        this.getVideo()
      } else if (this.type === 'pdf') {
        const url = this.filePath
        this.src = pdf.createLoadingTask(url)
        this.loadPdfHandler()
      } else if (this.type !== 'image') {
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = this.filePath
        link.setAttribute('download', this.fileName || '')
        link.setAttribute('target', '_blank')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        this.$emit('close')
      }
    })
  },
  destroyed() {
    if (this.videoPlayer !== null) {
      this.videoPlayer.dispose()
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    getVideo() {
      this.videoPlayer = new Aliplayer(
        {
          id: 'videoPreview',
          autoplay: false,
          source: this.filePath,
          format: 'm3u8',
          keyShortCuts: true,
          keyFastForwardStep: 15,
          useH5Prism: true,
          width: '100%',
          height: '100%',
          skinLayout: [
            { name: 'bigPlayButton', align: 'blabs', x: 30, y: 80 },
            {
              name: 'H5Loading',
              align: 'cc'
            },
            { name: 'errorDisplay', align: 'tlabs', x: 0, y: 0 },
            { name: 'infoDisplay' },
            { name: 'tooltip', align: 'blabs', x: 0, y: 56 },
            { name: 'thumbnail' },
            {
              name: 'controlBar',
              align: 'blabs',
              x: 0,
              y: 0,
              children: [
                { name: 'progress', align: 'blabs', x: 0, y: 44 },
                { name: 'playButton', align: 'tl', x: 15, y: 12 },
                { name: 'timeDisplay', align: 'tl', x: 10, y: 7 },
                { name: 'fullScreenButton', align: 'tr', x: 10, y: 12 },
                // {name:"subtitle", align:"tr",x:15, y:12},
                { name: 'setting', align: 'tr', x: 15, y: 12 },
                { name: 'volume', align: 'tr', x: 5, y: 10 }
              ]
            }
          ]
        }, function(player) {
          player.play()
        })
    },
    loadPdfHandler() {
      const loading = this.$loading({
        lock: true,
        text: '加载中，请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.src.promise.then(pdf => {
        loading.close()
        this.numPages = pdf.numPages
      })
    }
  }
}
</script>

<style lang="scss">
  .file-preview-dialog {
    .content {
      height: 500px;
    }
    .el-dialog__footer {
      text-align: center;
    }
  }
</style>
